<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="plugins/elementui/index.css">
        <link rel="stylesheet" href="css/login.css">

    </head>
    <style>
        .codestyle{
            padding: 0px 0px 20px 0px;
        }
        .codeimg{
            margin: 10px 0 0 20px;
            border: 1px solid #b4bccc;
            border-radius: 3px;
        }
        .login-form{
            border-radius: 4%;
        }
    </style>

    <body class="hold-transition skin-purple sidebar-mini">
        <div id="app">
            <el-container>
            <div class="login-container">
                <div class="loginBox">
                  <form method="post"
                        class="login-form"
                        action="/login.do"
                        label-position="left"
                        @submit.prevent="onSubmit"
                  >
                      <div class="title-container">
                        <div class="logoInfo clearfix">
                          <em class="logo"></em>
                        </div>
                      </div>
                      <div>
                        <span class="svg-container svg-container_login">
                          <span class="user"></span>
                        </span>
                        <input v-model="username" type="text" id="username" name="username" placeholder="请输入用户名" />
                      </div>
                      <div>
                        <span class="svg-container">
                          <span class="username"></span>
                        </span>
                        <input v-model="password" type="password" id="password" name="password" placeholder="请输入密码"/>
                      </div>
                      <div class="codestyle">
                          <span class="svg-container">
                              <img src="./img/aolibb1.png" style="width: 20px;height: 20px">
                            </span>
                        <input v-model="checkcode" type="text" id="checkcode" name="checkcode" placeholder="请输入验证码"/>
                          <img class="codeimg" src="/login/checkCode.do" alt="" width="80"
                               height="48" class="passcode" style="height: 33px;
                                            cursor: pointer;"
                               onclick="this.src=this.src+'?'">
                          <p style="margin: 0 auto;text-align: center; color: red">{{errorMessage}}</p>
                      </div>
                      <input type="submit" style="width:100%;margin-bottom:30px;" value="登录"></input>
                </form>
                </div>

              </div>
            </el-container>
        </div>
    </body>

    <!-- 引入组件库 -->
    <script src="js/vue.js"></script>
    <script src="plugins/elementui/index.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script>
        var myForms = document.getElementsByClassName("login-form");
        new Vue({
            el: '#app',
            data: {
                user: {
                    username: '123',
                    email: '123'
                },
                username: "",
                password: "",
                checkcode: "",
                errorMessage: ''
            },
            methods: {
                onSubmit() {
                    event.preventDefault();
                    var checkcode = this.checkcode;
                    var myForm = document.getElementsByClassName("login-form")[0];
                    // 假设你的表单有一个id为"myForm"
                    //请求后台
                    axios.post("/login/getCode.do?checkcode="+checkcode).then((response)=> {
                        if(response.data.data == "1"){
                              // 这里假设有一个submitForm方法来处理表单提交
                            this.clearlogin();
                            myForm.submit();
                            return true;
                        }else {
                            this.clearlogin();
                            this.errorMessage = "验证码错误";
                            return false;
                        }
                    });
                },
                clearlogin(){
                    this.username="";
                    this.password="";
                    this.checkcode = "";
                }
            }
        });
    </script>
</html>
